import styled from 'styled-components';
import bgImg from '@/assets/img/radio_bg.png';
import { Link } from 'react-router-dom';

interface metaProps {
  img: string;
}

export const MetaIconWrapper = styled(Link)<metaProps>`
  display: inline-block;
  width: 70px;
  height: 70px;
  margin: 0 0 25px 33px;
  &:hover {
    text-decoration: none;
    background: url(${bgImg}) 0 0 no-repeat;
    background-position: -70px 0;
  }
  .metaImg {
    margin: auto;
    background-image: url(${(props) => props.img});
    width: 48px;
    height: 48px;
    &:active {
      background-position: -48px 0;
    }
  }
  text-align: center;
`;
